<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div style="width:90%;margin:0 auto;margin-top: 30px;">
        <a-row>
          <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">二维码交易信息</a-col>
        </a-row>
        <a-form style="margin-bottom: 20px;" layout="inline">
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="商户号">
            <span class="ant-form-text">{{queryDetail.merchantNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth"></a-form-item>
          <a-form-item class="formItemWidth"></a-form-item>
          <a-form-item class='formItemWidth' v-bind="formItemLayout" label="商户名称">
                        <span class="ant-form-text">
                            {{queryDetail.merchantName}}
                        </span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="会员编号">
            <span class="ant-form-text">{{queryDetail.mainMemberNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易类型">
            <span class="ant-form-text">{{queryDetail.transName}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="商户单号">
            <span class="ant-form-text">{{queryDetail.merchantOrderNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易单号">
            <span class="ant-form-text">{{queryDetail.transOrderNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="上游单号">
            <span class="ant-form-text">{{queryDetail.externalOrderNo}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易日期">
            <span class="ant-form-text">{{queryDetail.transDate}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易时间">
            <span class="ant-form-text">{{queryDetail.transTime | timeFilter}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易金额">
            <span class="ant-form-text">{{queryDetail.amount | cashfilter}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易状态">
            <span class="ant-form-text">{{queryDetail.statusName}}</span>
          </a-form-item>
          <a-form-item v-if="queryDetail.terminalNo" class="formItemWidth" v-bind="formItemLayout" label="交易流水号">
            <span class="ant-form-text">{{queryDetail.serialNo}}</span>
          </a-form-item>
          <a-form-item class='formItemWidth' v-bind="formItemLayout" label="交易返回码">
              <span class="ant-form-text">
                  {{queryDetail.responseCode}}
              </span>
          </a-form-item>
          <a-form-item class='formItemWidth' v-bind="formItemLayout" label="备注">
              <span class="ant-form-text">
                  {{queryDetail.remark}}
              </span>
          </a-form-item>
          <a-row>
          <a-form-item style="width:100%" class="formItemWidth" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }" label="返回码注释">
              <span class="ant-form-text">
                  {{queryDetail.responseMessage}}
              </span>
          </a-form-item>
          </a-row>

          <a-row v-if="queryDetail.terminalNo">
            <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">终端信息</a-col>
          </a-row>
          <a-form-item v-if="queryDetail.terminalNo" class="formItemWidth" v-bind="formItemLayout" label="终端号">
            <span class="ant-form-text">{{queryDetail.terminalNo}}</span>
          </a-form-item>



          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">手续费信息</a-col>
          </a-row>
          <a-row>
            <a-form-item class="formItemWidth" v-bind="formItemLayout" label="总手续费">
              <span class="ant-form-text">{{queryDetail.feeAmount | cashfilter}}</span>
            </a-form-item>
          </a-row>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="交易手续费">
            <span class="ant-form-text">{{queryDetail.t1FeeAmount | cashfilter}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="D0垫资手续费">
            <span class="ant-form-text">{{queryDetail.d0FeeAmount | cashfilter}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="D0单笔手续费">
            <span class="ant-form-text">{{queryDetail.d0SingleAmount | cashfilter}}</span>
          </a-form-item>


          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">结算信息</a-col>
          </a-row>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="结算类型">
            <span class="ant-form-text">{{queryDetail.settlePeriod}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="结算状态">
            <span class="ant-form-text">{{queryDetail.settleStatus}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="上游结算日期">
            <span class="ant-form-text">{{queryDetail.finishTransDate}}</span>
          </a-form-item>
           <a-form-item class="formItemWidth" v-bind="formItemLayout" label="账务交易单号">
            <span class="ant-form-text">{{queryDetail.accountSettleOrderNo}}</span>
          </a-form-item>

          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">合作机构信息</a-col>
          </a-row>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="合作机构号">
            <span class="ant-form-text">{{queryDetail.agentCode}}</span>
          </a-form-item>
          <a-form-item class="formItemWidth" v-bind="formItemLayout" label="合作机构名称">
            <span class="ant-form-text">{{queryDetail.agentName}}</span>
          </a-form-item>

          <a-row >
            <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">交易凭证</a-col>
          </a-row>
          <a-form-item  class="formItemWidth" v-bind="formItemLayout">
           <span class="ant-form-text" v-if="queryDetail.attachRequest.files.length">
              <a-button :loading="downLoading" type="primary" @click="download"
                >交易凭证下载</a-button
              >
            </span>
            <span>
              暂无交易凭证
            </span>
          </a-form-item>

          <div>
            <!-- <a-form-item class="formItemWidth">
              <a-button
                style="width:140px;"
                ghost
                class="button_sty"
                type="primary"
                @click="openModal"
              >退款</a-button>
            </a-form-item> -->
            <a-row>
              <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">退款记录</a-col>
            </a-row>
            <a-table
              :columns="columns"
              :data-source="refundlist"
              size="small"
              :pagination="false"
              :rowKey="record => record.transOrderNo"
            >
             <span slot="transOrderNo" slot-scope="record">
                    <router-link
                    :to="`/org/transmanage/${record.transOrderNo}/qrcoderefund`"
                  >{{record.transOrderNo}}</router-link>
                </span>
               <span slot="amount" slot-scope="record">
                    {{record.amount | cashfilter}}
                </span>
            </a-table>
            <a-pagination
              size="small"
              @change="onPageChange"
              :current="pagination.current"
              :total="pagination.total"
              :pageSize="query.pageSize"
            />
          </div>
        </a-form>
        <a-button style="width:140px;" ghost type="primary" @click="backTransList">
          <a-icon type="double-left" />返回
        </a-button>
      </div>
    </a-spin>
    <!-- <a-modal title="退款" v-model="visible" :footer="null">
      <a-form @submit="handleSubmit" :form="form" style="width:90%;;margin:0 auto;">
        <a-form-item v-bind="formItemLayout" label="可退款金额">
          <span>{{reamount | cashfilter}}</span>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="请输入退款金额">
          <a-input-number
            style="width:180px;"
            v-decorator="[
            'toEmail',
            {rules: [{ required: true, message: '请输入退款金额', whitespace: true}]}
            ]"
            placeholder="请输入退款金额"
            :step="0.01"
            :max="reamount"
            :min="0"
          />元
          <span class="refund" @click="fullRefund">全部退款</span>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="备注">
          <a-input
            v-decorator="[
                          'remark',
                    ]"
            placeholder="请输入备注"
          ></a-input>
        </a-form-item>
        <div style="text-align:center;">
          <a-button
            style="width:140px;"
            ghost
            :loading="loading"
            htmlType="submit"
            type="primary"
          >确定</a-button>
        </div>
      </a-form>
    </a-modal> -->
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
import AHideData from "../../common/HideData";
const columns = [
  {
    title: "交易单号",
    scopedSlots: { customRender: "transOrderNo" },
    
  },
  { title: "交易金额", scopedSlots: { customRender: "amount" }, },
  { title: "交易日期", dataIndex: "transDate" },
  { title: "交易状态", dataIndex: "statusName" },
  // { title: "返回码注释", dataIndex: "STATUS" },
];

const data = [
  {
    key: 1,
    ctime: "2019-01-20",
    time: "2018-01-02",
    No: "124235436478",
    STATUS: "交易完成",
    type: "扫码支付",
    account: "42355元",
    description:
      "My name is Joey Black,, I am 32 years old, living in Sidney No. 1 Lake Park.",
  },
];

export default {
  name: "orgMyInfo",
  components: {},
  data() {
    return {
      data,
      columns,
      downLoading:false,
      visible: false,
      loading: false,
      spinning: false,
      form: this.$form.createForm(this),
      queryDetail: {},
      refundlist:[],
      pagination: { current: null, total: null },
      query: {
        pageSize: 10,
        page: 1,
      },
      reamount: 120,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 15, offset: 1 },
        },
      },
    };
  },
  watch: {},
  computed: {},
  filters: {
    nameFilter(value) {
      if (value) {
        return "*" + value.substring(1, value.length);
      }
      return "";
    },
    phoneFilter(value) {
      if (value) {
        return (
          value.substring(0, 3) + "****" + value.substring(7, value.length)
        );
      }
      return "";
    },

    timeFilter: function (value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    AccountNofilter(value) {
      if (value) {
        var reg = /.*(.{4})$/;
        return value.replace(reg, "**** **** **** ***$1");
      }
    },
    AccountTypefilter(value) {
      if (value == "C") {
        return "贷记卡";
      } else if (value == "D") {
        return "借记卡";
      }
    },
    cashfilter(value) {
      if (value) {
        return parseFloat(value / 100).toFixed(2) + "元";
      } else {
        return "0.00元";
      }
    },
  },
  mounted() {},
  activated() {
    let id = this.$route.params.id;
    this.getQueryDetail(id);
    this.getRefundLogs(id);
  },
  methods: {
    onPageChange: function (page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;  
      this.getRefundLogs(this.$route.params.id);
    },
    getRefundLogs(id) {
      this.query.data = id
      this.$axios.post("/agent/transaction/transList/refund/logs",this.query).then(
        (res) => {
          console.log(res);
          if (res.data.code == "OK") {
            this.refundlist = res.data.list;
            this.pagination.current = res.data.current;
            this.pagination.total = res.data.total;
          }else{
            this.refundlist =[]
            this.pagination.total = 1
            this.pagination.current = 1
          }
        },
        (err) => {}
      );
    },
    getQueryDetail(id) {
      this.$axios.get("/agent/transaction/transList/qr/detail/" + id).then(
        (res) => {
          console.log(res);
          if (res.data.code == "OK") {
            this.queryDetail = res.data.data;
          }
        },
        (err) => {}
      );
    },
    fullRefund() {},
    backTransList() {
      this.$router.push("/org/transmanage/transquery");
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log("Received values of form: ", values);
          this.loading = true;
          let data = {
            email: values.toEmail,
            // url:
            //   `file.newpay.com/file/file/fetch/sales/slip/${this.queryDetail.merchantNo}/${this.queryDetail.transOrderNo}`,
            merchantNo: this.queryDetail.merchantNo,
            transOrderNo: this.queryDetail.transOrderNo,
          };
          this.$axios.post("/transaction/sendSalesSlip/email", data).then(
            (res) => {
              console.log("res", res);
              if (res.data.code == "OK") {
                this.$message.success("发送成功！");
                this.loading = false;
                this.visible = false;
              } else {
                this.$message.error(res.data.message);
                this.loading = false;
              }
            },
            (err) => {
              this.loading = false;
              this.$message.error(res.data.message);
            }
          );
        }
      });
    },
    download() {
      this.downLoading = true;
      console.log("attachRequest", this.queryDetail.attachRequest);

      this.$axios
        .post("/file/file/attach", this.queryDetail.attachRequest)
        .then(
          (res) => {
            this.downLoading = false;
            console.log("res", res);
            //   console.log("res.data.data:",res.data.data);
            if (res.data.data != null) {
              window.location.href = res.data.data;
            } else {
              this.$message.error("附件不存在");
            }
          },
          (err) => {
            this.downLoading = false;
            this.$message.error(err.message);
          }
        );
    },
    openModal() {
      this.visible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}

.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 30%;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}
.button_sty {
  width: 140px;
  margin-top: 30px;
}
.refund {
  color: #1890ff;
  cursor: pointer;
}
</style>